<template>
    <div>
      <!--导航区域-->
      <el-breadcrumb separator-class="el-icon-arrow-right" v-if="!isAdmin">
        <el-breadcrumb-item :to="{ path: '/user/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文件管理</el-breadcrumb-item>
        <el-breadcrumb-item>项目文件</el-breadcrumb-item>
      </el-breadcrumb>

      <el-breadcrumb separator-class="el-icon-arrow-right" v-else>
        <el-breadcrumb-item :to="{ path: '/main' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>文件管理</el-breadcrumb-item>
        <el-breadcrumb-item>项目文件</el-breadcrumb-item>
      </el-breadcrumb>

      <el-card>
        <el-row :gutter="20">
          <el-col :span="6">
            <el-input placeholder="请输入文件名查找" v-model="searchFileName" clearable @clear="reSetPage()" >
              <el-button slot="append" icon="el-icon-search" @click="reSetPage()"></el-button>
            </el-input>
          </el-col>
          <el-col :span="7">
            <template>
              <el-select v-model="searchGroupName" filterable clearable placeholder="通过组名筛选" @change="reSetPage()"
                         @clear="reSetPage()">
                <el-option
                  v-for="item in groupList"
                  :key="item.groupId"
                  :label="item.groupName"
                  :value="item.groupName">
                </el-option>
              </el-select>
            </template>
          </el-col>
        </el-row>
        <el-table :data="fileList" style="width: 100%" border>
          <el-table-column sortable label="项目组" width="180px">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.group }}</span>
            </template>
          </el-table-column>
          <el-table-column label="上传人" width="110">
            <template slot-scope="scope">
              <div slot="reference" >
                <el-tag  size="medium">{{ scope.row.userName }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文件名" width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.fileName }}</span>
            </template>
          </el-table-column>
          <el-table-column label="文件描述" width="220">
            <template slot-scope="scope">
              <div slot="reference">
                <span style="margin-left: 10px">{{ scope.row.fileDesc }}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="文件大小" width="180">
            <template slot-scope="scope">
              <div slot="reference">
                <el-tag style="margin-left: 10px">{{ scope.row.fileSize }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="上传时间" width="180">
            <template slot-scope="scope">
              <div slot="reference">
                <el-tag style="margin-left: 10px">{{ scope.row.uploadTime }}</el-tag>
              </div>
            </template>
          </el-table-column>
          <el-table-column  label="操作">
            <template slot-scope="scope">
              <!--下载文件的时候，必须传递realFileName,后端保存在阿里云服务器的文件名称是：时间戳+文件名，但在显示文件名的时候去掉时间戳字符串-->
              <el-button  type="primary" size="small"><a :href='"http://101.37.78.254:8090/602system/file/download?fileName="+ scope.row.realFileName'>下载</a></el-button>
              <el-button size="small" type="danger" v-if="isDisable"
                @click="deleteFile(scope.row.realFileName)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <!--分页-->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[8,9, 10, 11, 12]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>

      </el-card>
    </div>
</template>

<script>
    export default {
        name: "ProjectFile",
      data(){
        return{
          isAdmin: false,
          fileType: '项目文件',
          searchFileName: '',
          searchGroupName: '',
          pageNum: 1,
          pageSize: 8,
          total: 1,
          groupList: [],
          fileList: [],
          isDisable: false
        }
      },
      created() {
        var userInfo = JSON.parse(window.sessionStorage.getItem("user"));
        if (userInfo.userAuthority == 2){
          this.isDisable = true;
          this.isAdmin = true;
        }
        this.getGroupList();
        this.getFileList();
      },
      methods: {
        async deleteFile(realFileName){
          const confirmResult = await this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).catch(err => {
            return err;
          });
          //当用户确认时，则返回值为字符串：confirm
          //取消时，返回字符串cancel
          if (confirmResult !== 'confirm'){
            return this.$message.info("已取消删除")
          }
          const {data: res} = await this.$http.delete(`file/delete/${realFileName}`);
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res)
          this.getFileList();
          return this.$message.success("删除成功!");

        },
        //获取我的组
        async getGroupList(){
          var userInformation = JSON.parse(window.sessionStorage.getItem("user"));
          //如果是管理员
          if (userInformation.userAuthority == 2){
            //获取所有组
            const {data: res} = await this.$http.get('teamGroup/getGroups');
            console.log(res);
            if (res.status !== 200){
              return this.$message.error(res.msg);
            }
            this.groupList = res.data;
          }else {
            const {data: res} = await this.$http.get(`group/getMyGroups/${userInformation.userId}`);
            console.log(res);
            if (res.status !== 200) {
              return this.$message.error(res.msg);
            }
            this.groupList = res.data;
          }
        },
        reSetPage(){
          this.pageNum = 1;
          this.pageSize = 8;
          this.getFileList();
        },
        //获取文件列表
        async getFileList(){
          const {data: res} = await this.$http.get('file/getFiles',{
            params: {
              fileType: this.fileType,
              pageNum: this.pageNum,
              pageSize: this.pageSize,
              searchFileName: this.searchFileName,
              groupName: this.searchGroupName
            }
          });
          if (res.status !== 200){
            return this.$message.error(res.msg);
          }
          console.log(res);
          this.fileList = res.data.fileList;
          this.total = res.data.total;
        },
        handleSizeChange:function(size){   //一页显示多少条
          this.pageSize = size;
          this.getFileList();
        },
        handleCurrentChange:function(currentPage){  //页码更改方法
          this.pageNum = currentPage;
          this.getFileList();
        }

      }
    }
</script>

<style scoped lang="scss">
  a{
    color: #fff;
    width:150px;
  }

</style>
